<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>投诉回复查询</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body,html{background-color: #fff;}
			.mui-icon-back:before, .mui-icon-left-nav:before{float:left;margin-top:-.09rem;}
			.mui-content{position:absolute;top:0;left:0;/*height:100%;*/background:url(../../images/jindu/sq_jindu_bg.png)  no-repeat;background-size:100% auto;overflow:hidden;}
		    .mui-action-back{color:#fff;font-size:14px;margin:.35rem 0 0 .35rem;}
		    .jindu_content{width:7.2rem;background:#fff;border-radius:.1rem;overflow:hidden;margin:0 auto 0 auto;padding:0;box-sizing:border-box;}
	        .jindu_title{margin:3.3rem auto .28rem auto;font-size:.28rem;color:#fff;line-height:.4rem;width:6.5rem;overflow:hidden;}
		    .jindu_title>.blue{color:#f6ff00;margin:0 .03rem;}
		     .form_cont{width:6.8rem;float:left;margin:0 .22rem;}
			.form_cont .form_cont_list{width:6.75rem;float:left;border:1px solid #eee;border-radius:.08rem;height:.85rem;margin-bottom:.33rem;position:relative;}
			.form_cont .form_cont_list>.dian{width:.11rem;height:.11rem;float:left;border-radius:50%;margin:.38rem 0 0 .3rem;background:#ff2222;}
			.form_cont .form_cont_list>.form_control{width:5.05rem;float:left;padding-left:.2rem;box-sizing:border-box;color:#666;font-size:.3rem;border:none;height:.85rem;background:transparent;}
			.form_cont .form_cont_list>.mui-icon-arrowdown{position:absolute;top:.23rem;right:.4rem;font-size:.4rem;color:#222;}
			input[placeholder], [placeholder], *[placeholder] {color:#c7c7cd !important;}
			.form_cont .mui-btn-primary{width:6.8rem;height:.85rem;background:#1653fc;color:#fff;border-radius:.1rem;overflow:hidden;margin:.6rem 0 .23rem 0;float:left;font-size:.32rem;border: 1px solid #1653fc;}
		    .form_cont .form_cont_list>.bg_blue{background:#1653fc;}
		    .form_cont .form_cont_list>.bg_orange{background:#ff9c00;}
		    .code{color:#1653fc;font-size:.3rem;position:absolute;top:.21rem;right:.15rem;}
		    .exp{width:100%;float:left;margin:0;color:#999;font-size:.28rem;}
		    .exp>img{width:.3rem;float:left;margin-right:.15rem;margin-top:.05rem;}
		    .form_cont .mui-btn-gray{background:#eee url(../../images/jindu/scan.png) no-repeat;background-size:.35rem auto;background-position:1.8rem .22rem;border:1px solid #cccccc;color:#666666;margin:0;box-sizing:border-box;}
		    .line_cont{width:4.9rem;margin:1rem auto .7rem 1.1rem;position:relative;float:left;border-top:1px solid #a9a9a9;height:.3rem;}
		    .line_cont>span{width:1.8rem;background:#fff;position:absolute;line-height:.33rem;text-align:center;color:#999;font-size:.28rem;top:-.2rem;left:1.5rem;}
		    /*切换菜单*/
		   .mui-segmented-control{margin-bottom:.5rem;height:.8rem;border:none;border-bottom:1px solid #eee;border-radius: 0;}
		   .mui-segmented-control .menu_list{width:50%;float:left;}
		   .mui-segmented-control .menu_list .mui-control-item{border:none;background:#fff;color:#666;font-size:.32rem;border-radius:0;width:2rem;margin:0 .8rem;float:left;height:.8rem;line-height:.8rem;margin-top:.2rem}
		   .mui-segmented-control .menu_list .mui-active{color:#1653fc;border-bottom:2px solid #1653fc;}
		
		</style>
	</head>
	<body>
		<div class="mui-content" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h5 class="jindu_title">您可以凭诉求编号、查询码查询诉求回复进度，也可以<a class="blue" onclick="showLogin(false);">登录</a>用户中心查看诉求回复信息</h5>
			<div class="jindu_content">
				<div class="mui-slider">
					<!--切换菜单-->
					<div id="segmentedControl" class="mui-segmented-control">
						<div class="menu_list">
							<a class="mui-control-item mui-active" href="#item1">
							诉求编号查询
						   </a>
						</div>
						<div  class="menu_list">
							<a class="mui-control-item" href="#item2">
							手机号码查询
							</a>
						</div>
					</div>
				
					<div class="content">
						<!--诉求编号查询-->
						<div id="item1" class="mui-control-content mui-active">
							<form class="form_cont">
								<a class="form_cont_list">
									<i class="dian bg_blue"></i>
									<input type="text" id='sqCode' class="form_control" placeholder="请输入诉求编号"/>
								</a>
								<a class="form_cont_list">
									<i class="dian bg_blue"></i>
									<input type="text" id='searchCode' class="form_control" placeholder="请输查询码"/>
								</a>
								<p class="exp"><img src="../../images/jindu/wrong.png">诉求告知单中的诉求编号和查询码</p>
								<input type="button" class="mui-btn mui-btn-primary ripple" id="item1_search" value="搜 索"/>
						   </form>
						</div>
						<div id="item2" class="mui-control-content">
							<form class="form_cont">
								<a class="form_cont_list">
									<i class="dian bg_blue"></i>
									<input type="text" id='phone' class="form_control" placeholder="请输入手机号码"/>
									<span class="code code01">获取验证码</span>
									<span class="code code02 " style="display:none;">60s</span>
								</a>
								<a class="form_cont_list">
									<i class="dian bg_orange"></i>
									<input type="text" class="form_control" id='msgCode' placeholder="请输入验证码">
								</a>
								<p class="exp"><img src="../../images/jindu/wrong.png">手机号码必须和诉求信件中所留号码一致</p>
								<input type="button" class="mui-btn mui-btn-primary ripple" id='item2_search' value="搜 索"/>
						   </form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			function my_immersed(immersed){
				document.getElementById("header").style.paddingTop = immersed + 'px';
			}
		</script>
		<script type="text/javascript" src="../../js/immersed.js" ></script>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/vue.min.js"></script>
		<script type="text/javascript" src="../../js/jquery2.2.4.min.js"></script>
		<script type="text/javascript" src="../../js/app.js"></script>
		<script>
			mui.init();
			mui.plusReady(function(){
				closeWaitingAndShowView(); 
				//重写back
				mui.back = function(){ 
					plus.webview.currentWebview().opener().show('fade-in',100);
					plus.webview.currentWebview().close('zoom-fade-in',300);
				}
			});
			
		    //诉求编号查询
		    document.getElementById("item1_search").addEventListener('tap',function () {
		    	var sqCode = $('#sqCode').val();
		    	var searchCode = $('#searchCode').val();
		    	if(sqCode == '' || sqCode == null){
		    		mui.toast('请输入诉求编号');
		    		return;
		    	}
		    	
		    	if(searchCode == '' || searchCode == null){
		    		mui.toast('请输入查询码');
		    		return;
		    	}
		    	loadData(sqCode,searchCode);
			});
			
			/**
			 * 根据诉求编号和查询码查询诉求详细
			 * @param {Object} sqCode 诉求编号
			 * @param {Object} searchCode 查询码
			 * 
			 */
			function loadData(sqCode,searchCode){
				utils.showWaiting();
				var url = 'appHttpService/viewSqInfoReg.do';
				utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.state == 0) {
						showTemplates('../my/my_sq_detail.html','诉求详情','../my/my_sq_detail.html?'+jsonToParams({sqCode:sqCode,searchCode:searchCode}));
					}else{
						mui.alert('未找到相关信息',null,null,function(){
						},'div')
					}
					closeWaitingAndShowView();
				}, jsonToParams({
					'sqInfoRegId':null,
					'sqCode':sqCode,
					'searchCode':searchCode
				}));
			}
			
			//手机号码+验证码查询
		    document.getElementById("item2_search").addEventListener('tap',function () {
		    	var phone = $('#phone').val();//手机号码
		    	var msgCode = $('#msgCode').val();//短信验证码
		    	
		    	if(phone == '' || phone == null){ 
		    		mui.toast('请输入手机号码');
		    		return;
		    	}
		    	var phoneFlag = isMoible(phone);
				if(!phoneFlag){
					mui.toast('请输入正确的手机号码');
					return;
				}
				var code = $("#msgCode").val();
				var oldCode = localStorage.getItem('appealMsgCode');
				if(!code) {
					mui.toast("请输入验证码");return false
				}
				var olddate = localStorage.getItem(oldCode);
				if(code != oldCode ){
					mui.toast("验证码错误");return false
				}
				if(new Date().getTime() - olddate > (2*60*1000)){
					mui.toast("验证码已过期,请重新获取验证码");return false
				}
		    	showTemplates('../my/my_sq.html','我的诉求','../my/my_sq.html?phone='+phone);
			});
			
			 //倒计时
		    $('.code01').click(function(){
		    	var phone = $('#phone').val();
		    	if(phone == '' || phone == null){ 
		    		mui.toast('请输入手机号码');
		    		return;
		    	}
		    	var phoneFlag = isMoible(phone);
				if(!phoneFlag){
					mui.toast('请输入正确的手机号码');
					return;
				}
				
				var j = $(this);
				sendSMS(SYS_PARAM.SEND_ID_CODE_SMS,$("#phone").val().trim(),function(code,autoShow){
					if(code){
						autoShow && $("#msgCode").val(code) ;
						localStorage.setItem('appealMsgCode',code);
						localStorage.setItem(code,new Date().getTime());
						j.hide();
						$('.code02').show();
						setTimeout(countDown, 1000);
					}
				});
				var t = 60;
				function countDown() {//倒计时
					t--;
					if(t > 0) {
						$('.code02').text(t + 's');
						setTimeout(countDown, 1000);
					} else {
						$('.code02').hide();
						$('.code02').text('60s');
						j.show();
					}
				}
		    });
			
		</script>
	</body>
</html>
